<template>
  <div id="editorbox">
    <div ref="editor"  :style="'text-align:left;'+(height ? 'height:'+height+';' : 'height:100%;')"></div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  export default {
    name: 'editor',
    data () {
      return {
        editorContent: '',
        editor: null
      }
    },
    props: {
      nochat: {
        default: false
      },
      height: {
        default: false
      }
    },
    created () {
    },
    methods: {
      insertHTML (html) {
        console.log(html)
        this.editor.cmd.do('insertHTML', html)
        this.editor.change()
      },
      clearContent () {
        this.editor.txt.clear()
      },
      getInputCont () {
        var _this = this
        var arr = _this.editor.txt.getJSON()
        // console.log(arr)
        var text = ''
        var imgArr = []
        arr.forEach((item, index) => {
          // console.log(1)
          if (index !== 0) text += '\n'
          item.children.forEach((items, indexs) => {
            // console.log(2)
            if (typeof items === 'string') {
              // console.log(4)
              text += items
            } else {
              // console.log(9)
              if (items.tag === 'br' && indexs !== item.length - 1) {
                // console.log(11)
                text += '\n'
              } else if (items.tag === 'img') {
                // console.log(5)
                let className
                let alt
                let mediaId
                let path
                items.attrs.forEach((item1) => {
                  if (item1.name === 'class') className = item1.value
                  if (item1.name === 'alt') alt = item1.value
                  if (item1.name === 'mediaid') mediaId = item1.value
                  if (item1.name === 'path') path = item1.value
                })
                if (className === 'face') {
                  // console.log(6)
                  text += alt
                } else if (className === 'pictrue') {
                  // console.log(7)
                  imgArr.push({
                    content: path,
                    media_id: mediaId
                  })
                }
              }
            }
          })
        })
        return {
          text: text,
          html: _this.editor.txt.html(),
          img: imgArr
        }
      },
      sendTextMsg (text, html, img) {
        // this.$emit('sendTextMsg', text, _this.editor.txt.html())
        this.$emit('sendTextMsg', text, html, img)
        this.clearContent()
      }
    },
    mounted () {
      var editor = new E(this.$refs.editor)
      this.editor = editor
      window.editor = editor
      editor.customConfig.zIndex = 1
      editor.customConfig.onchange = (html) => {
        let incont = this.getInputCont()
        this.$emit('onchange', incont.text, incont.html)
      }
      editor.customConfig.menus = [
      ]
      editor.customConfig.pasteTextHandle = function (content) {
        // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
        var valiHTML = ['br']
        // content = content.replace(/\r?\n/gi, '<br>')
        content = content.replace(/_moz_dirty=""/gi, '')
          .replace(/\[/g, '[[-').replace(/\]/g, '-]]')
          .replace(/<\/ ?tr[^>]*>/gi, '[br]')
          .replace(/<\/ ?td[^>]*>/gi, '&nbsp;&nbsp;')
          .replace(/<(ul|dl|ol)[^>]*>/gi, '[br]')
          .replace(/<(li|dd)[^>]*>/gi, '[br]')
          .replace(/<p [^>]*>/gi, '[br]')
          .replace(new RegExp('<(/?(?:' + valiHTML.join('|') + ')[^>]*)>', 'gi'), '[$1]')
          .replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', 'gi'), '[span$1]')
          .replace(/<[^>]*>/g, '').replace(/\[\[-/g, '[')
          .replace(/-\]\]/g, ']')
          .replace(new RegExp('\\[(/?(?:' + valiHTML.join('|') + '|img|span)[^\\]]*)\\]', 'gi'), '<$1>')
        content = content.replace(/\r?\n/gi, '<br>')
        content = content.replace('<br><br>', '')
        console.log(content)
        return content
      }
      editor.create()
      var _this = this
      this.$refs.editor.getElementsByClassName('w-e-text')[0].onkeydown = function (event) {
        if (event.keyCode === 13 && !event.shiftKey && !_this.nochat) {
          event.preventDefault()
          var incont = _this.getInputCont()
          // console.log(incont)
          _this.sendTextMsg(incont.text, incont.html, incont.img)
        }
      }
    }
  }
</script>

<style lang="less">
  @import './style.less';
</style>
